<template>
	<div class="global-scheduling">
		<!-- 资源配置统计卡片 -->
		<el-row :gutter="20" style="margin-bottom:18px;">
			<el-col :xs="12" :sm="6">
				<el-card>
					<div class="stat-title">设备资源</div>
					<div class="stat-num">{{ stats.device }}</div>
				</el-card>
			</el-col>
			<el-col :xs="12" :sm="6">
				<el-card>
					<div class="stat-title">人员资源</div>
					<div class="stat-num">{{ stats.staff }}</div>
				</el-card>
			</el-col>
			<el-col :xs="12" :sm="6">
				<el-card>
					<div class="stat-title">物料种类</div>
					<div class="stat-num">{{ stats.material }}</div>
				</el-card>
			</el-col>
			<el-col :xs="12" :sm="6">
				<el-card>
					<div class="stat-title">在制订单</div>
					<div class="stat-num">{{ stats.order }}</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- 任务分配表 -->
		<el-card style="margin-bottom:20px;">
			<div style="font-weight:bold;margin-bottom:10px;">当前任务分配</div>
			<el-table :data="taskData" border size="small" style="width:100%;">
				<el-table-column prop="taskNo" label="任务编号" width="110" />
				<el-table-column prop="taskName" label="任务名称" width="140" />
				<el-table-column prop="resource" label="分配资源" width="160" />
				<el-table-column prop="start" label="计划开始" width="120" />
				<el-table-column prop="end" label="计划结束" width="120" />
				<el-table-column prop="status" label="状态" width="90">
					<template #default="scope">
						<el-tag :type="scope.row.status === '已完成' ? 'success' : (scope.row.status === '进行中' ? 'warning' : 'info')">
							{{ scope.row.status }}
						</el-tag>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 甘特图 -->
		<el-card>
			<div style="font-weight:bold;margin-bottom:10px;">生产调度甘特图</div>
			<div ref="ganttRef" style="width:100%;min-width:680px;height:380px;"></div>
		</el-card>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 资源统计数据
const stats = {
	device: 14,
	staff: 38,
	material: 21,
	order: 5
}

// 当前任务分配模拟
const taskData = [
	{ taskNo: 'TSK-001', taskName: '头孢曲松分装', resource: '压片机A, 李明', start: '2024-06-01', end: '2024-06-03', status: '已完成' },
	{ taskNo: 'TSK-002', taskName: '阿莫西林包装', resource: '灌装机B, 王华', start: '2024-06-02', end: '2024-06-05', status: '进行中' },
	{ taskNo: 'TSK-003', taskName: '葡萄糖检测', resource: '检测仪C, 张伟', start: '2024-06-03', end: '2024-06-06', status: '待执行' },
	{ taskNo: 'TSK-004', taskName: '胶囊灭菌', resource: '灭菌柜D, 刘涛', start: '2024-06-04', end: '2024-06-07', status: '待执行' },
	{ taskNo: 'TSK-005', taskName: '成品入库', resource: '库管组, 陈蕾', start: '2024-06-05', end: '2024-06-08', status: '待执行' }
]

// 甘特图模拟数据
const ganttTasks = [
	{ name: '头孢曲松分装', resource: '压片机A', start: '2024-06-01', end: '2024-06-03', color: '#67C23A' },
	{ name: '阿莫西林包装', resource: '灌装机B', start: '2024-06-02', end: '2024-06-05', color: '#409EFF' },
	{ name: '葡萄糖检测', resource: '检测仪C', start: '2024-06-03', end: '2024-06-06', color: '#E6A23C' },
	{ name: '胶囊灭菌', resource: '灭菌柜D', start: '2024-06-04', end: '2024-06-07', color: '#909399' },
	{ name: '成品入库', resource: '库管组', start: '2024-06-05', end: '2024-06-08', color: '#36CFC9' }
]

// 日期范围（确保日期序列连续）
function getDateRange(start, end) {
	const res = []
	let dt = new Date(start)
	const ed = new Date(end)
	while (dt <= ed) {
		res.push(dt.toISOString().slice(0, 10))
		dt.setDate(dt.getDate() + 1)
	}
	return res
}
const xDates = getDateRange('2024-06-01', '2024-06-08')

// 渲染函数
const ganttRef = ref()
let chart
function renderGantt() {
	if (!chart && ganttRef.value) chart = echarts.init(ganttRef.value)
	if (!chart) return

	// Y轴是任务名
	const yAxisData = ganttTasks.map(t => t.name)

	// 用 custom series 绘制横条
	chart.setOption({
		tooltip: {
			formatter: params => {
				const d = ganttTasks[params.dataIndex]
				return `${d.name}<br/>${d.resource}<br/>${d.start} ~ ${d.end}`
			}
		},
		grid: { left: 100, right: 18, top: 40, bottom: 36, containLabel: true },
		xAxis: {
			type: 'category',
			data: xDates,
			axisLabel: { rotate: 22 }
		},
		yAxis: {
			type: 'category',
			data: yAxisData,
			inverse: true
		},
		series: [{
			type: 'custom',
			renderItem: (params, api) => {
				const task = ganttTasks[params.dataIndex]
				const start = xDates.indexOf(task.start)
				const end = xDates.indexOf(task.end)
				const y = api.coord([0, params.dataIndex])[1]
				const xStart = api.coord([start, params.dataIndex])[0]
				const xEnd = api.coord([end + 1, params.dataIndex])[0]
				const height = 18
				return {
					type: 'rect',
					shape: {
						x: xStart,
						y: y - height / 2,
						width: xEnd - xStart,
						height
					},
					style: api.style({
						fill: task.color,
						stroke: '#fff'
					}),
					textContent: {
						type: 'text',
						style: {
							text: task.resource,
							x: xStart + 5,
							y: y + 1,
							font: 'bold 13px sans-serif',
							fill: '#fff',
							verticalAlign: 'middle'
						}
					},
					textConfig: {
						position: 'insideLeft'
					}
				}
			},
			encode: { x: [0, 1], y: 0 },
			data: ganttTasks.map((t, i) => i)
		}]
	})
}

onMounted(() => {
	setTimeout(renderGantt, 20)
})


</script>

<style scoped>
.global-scheduling {
	padding: 16px;
}

.stat-title {
	font-size: 1.02em;
	color: #888;
	margin-bottom: 8px;
}

.stat-num {
	font-size: 2.2em;
	color: #409EFF;
	font-weight: bold;
	text-align: center;
}
</style>